<template>
  <div class="questionStyle">
    <li
      v-for="(items, indexs) in questionListData"
      :key="indexs"
      :id="items.questionNum"
      v-show="getQuestVal(items) != null || showAll"
      style="cursor: not-allowed"
    >
      <div class="question-content">
        <h3>
          <b style="font-size: 22px">{{ items.bigType }}</b>
        </h3>
        <div v-if="getQuestVal(items) != null">
          <span class="question-num">{{ items.orderNum }}</span>
          <h4>
            {{ items.question
            }}<i>(题型：{{ items.questionType | formatquestionType }}题, 得分:{{ items.answerGradePoint }}分)</i>
          </h4>
        </div>
        <div v-else>
          <span class="question-num" style="background-color: #a8a8a8">{{ items.orderNum }}</span>
          <h4>
            {{ items.question }}<i>(题型：{{ items.questionType | formatquestionType }}题)</i>
          </h4>
        </div>
        <div class="question-detail">
          <div v-show="items.questionMemo" class="question-atten">
            <img src="@/assets/attention-red.png" alt="" />
            <span>{{ items.questionMemo }}</span>
          </div>
          <!-- 关联技术库题 -->
          <div class="technology" v-show="items.relateTechnologyLibFlag">
            <div class="technology-header">
              <ul class="leftSide">
                <li>
                  <img src="@/assets/total.png" alt="" />
                  <span>共:{{ items.technologyList == null ? 0 : items.technologyList.length }}条</span>
                </li>
                <li>
                  <img src="@/assets/circle.png" alt="" />
                  <span>一级:{{ items.levelOne == null ? 0 : items.levelOne }}条</span>
                </li>
                <li>
                  <img src="@/assets/circle.png" alt="" />
                  <span>二级:{{ items.levelTwo == null ? 0 : items.levelTwo }}条</span>
                </li>
              </ul>
            </div>
            <a-table
              :columns="techColumns"
              bordered
              :pagination="true"
              :data-source="items.technologyList"
              size="small"
            ></a-table>
          </div>

          <!-- 单选题 -->
          <a-radio-group
            v-show="!items.relateTechnologyLibFlag && items.questionType === 1"
            v-model="items.singleChoice"
            :class="{ notAllowed: disabledQuestion }"
          >
            <div v-for="(i, v) in items.optionVoList"  style="display:flex">
              <a-radio :key="v" :value="i.id">
                {{ i.optionContent }}
              </a-radio>
              <div v-show="showMemo(i.optionMemo)" class="question-atten  memo-cls">
                <span>(</span>
                <span>{{ i.optionMemo }}</span>
                <span>)</span>
              </div>
            </div>
          </a-radio-group>

          <!-- 多选题 -->
          <a-checkbox-group
            style="display: flex; flex-direction: column; margin-bottom: 10px"
            v-show="!items.relateTechnologyLibFlag && items.questionType === 2"
            v-model="items.multipleChoice" 
            :class="{ notAllowed: disabledQuestion }" 
          >
            <div  v-for="(i, v) in items.optionVoList">
              <a-checkbox style="margin-left: 8px" :key="v" :value="i.id">
                {{ i.optionContent }}
              </a-checkbox>
              <div v-show="showMemo(i.optionMemo)" class="question-atten  memo-cls">
                <span>(</span>
                <span>{{ i.optionMemo }}</span>
                <span>)</span>
              </div>
            </div>
          </a-checkbox-group>

          <!-- 填空题 -->
          <a-input
            v-show="!items.relateTechnologyLibFlag && items.questionType === 3 && items.textType === 1"
            v-model="items.answerValue"
            placeholder="请输入你的答案" readOnly 
          />
          <a-input-number
            v-show="!items.relateTechnologyLibFlag && items.questionType === 3 && items.textType === 2"
            :precision="0"
            v-model="items.answerValue"
            placeholder="请输入你的答案" readOnly 
          />
          <a-input-number
            v-show="!items.relateTechnologyLibFlag && items.questionType === 3 && items.textType === 3"
            v-model="items.answerValue"
            placeholder="请输入你的答案" readOnly
          />

          <!-- 判断题 -->
          <a-radio-group
            v-show="!items.relateTechnologyLibFlag && items.questionType === 4"
            v-model="items.trueOrFalse" :class="{ notAllowed: disabledQuestion }" 
          >
            <div v-for="(i, v) in items.optionVoList"  style="display:flex">
            <a-radio :key="v" :value="i.id">
              {{ i.optionContent }}
            </a-radio>
            <div v-show="showMemo(i.optionMemo)" class="question-atten  memo-cls">
                <span>(</span>
                <span>{{ i.optionMemo }}</span>
                <span>)</span>
              </div>
          </div>
          </a-radio-group>

          <!-- 说明题 -->
          <a-textarea
            v-model="items.answerMemo"
            :class="[
              items.needAnswerMemoFlag && !items.answerMemo ? 'requiredColor' : ''
            ]"
            readOnly
            placeholder="请输入详细说明"
            :auto-size="{ minRows: 2 }"
          />

          <!-- 上传附件 -->
          <div v-if="!items.relateTechnologyLibFlag && items.needAttachFlag" style="display: flex">
            <ht-upload
              :ref="items.id"
              class="upload-demo"
              multiple
              dbKey="Trd"
              :busField="busFieldVal"
              :busKey="busKeyVal ? busKeyVal : projectBuildId"
              :busType="String(items.id)"
              :show-file-list="false"
              ftpKey="ftp"
              v-model="items.fileList"
            >
              <div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过2M</div>
            </ht-upload>
            <div class="upload-list">
              <a-row v-for="file in items.fileList" :key="file.id">
                <a @click="showAttach(file)">&nbsp;&nbsp;{{ file.fileName }}&nbsp;&nbsp;</a>
                <a @click="showAttach(file)">{{ file.uploadTime }}</a>
                <a-icon
                  type="download" 
                  style="text-indent: 1em; color: #1890ff; cursor: pointer"
                  @click="downLoadAttach(file)"
                />
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
</template>
<script>
export default {
  name: 'QuestionAuditList',
  components: {
  },
  props: {
    questionListData: {
      Type: Array,
      default: () => [],
    },
    projectBuildId: {
      Type: String,
      default: '',
    },
    showAll: {
      Type: Boolean,
      default: false,
    },
    busFieldVal: {
      Type: String,
      default: 'ProjectBuildValue',
    },
    busKeyVal:{
      Type: String,
      default: ''
    }
  },
  data() {
    return {
      searchWord: '',
      url: {
        searchTechList: '/rad/technology/queryListByCodeOrName',
      },
      techColumns: [
        {
          title: '技术编号',
          dataIndex: 'code',
          align: 'center',
          scopedSlots: { customRender: 'code' },
        },
        {
          title: '技术名称',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '技术等级',
          dataIndex: 'techLevel',
          align: 'center',
        },
      ],
      addTechQuestion: null,
      currSelectTechIds: [],
      currSelectTechs: [],
      techData: [],
      visible: false,
      confirmLoading: false,
      freshKey: 0,
      confirmVisible: false,
      confirmQuestion: null,
      disabledQuestion: true,
    }
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    showAttach(file) {
      this.$emit('showAttach', file)
    },
    downLoadAttach(file){
      this.$emit('downLoadAttach', file)
    },
    showMemo(field) {
      if (field == null || field == undefined || field.trim().length == 0) {
        return false
      }
      return true
    },
    //获取题目的值
    getQuestVal(item) {
      var val = null
      if (item.questionType === 1) {
        val = item.singleChoice
      } else if (item.questionType === 2) {
        val = item.multipleChoice
      } else if (item.questionType === 3) {
        val = item.answerValue
      } else if (item.questionType === 4) {
        val = item.trueOrFalse
      }
      if (item.relateTechnologyLibFlag) {
        val = item.technologyList
      }
      if (val == null || val == undefined || val == '' || val.length == 0) {
        return null
      }
      return val
    },
  },
  filters: {
    formatquestionType(type) {
      switch (type) {
        case 1:
          return '单选'
        case 2:
          return '多选'
        case 3:
          return '填空'
        case 4:
          return '判断'
        default:
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ span.ant-radio + *,
/deep/ .ant-checkbox + span {
  font-size: 16px;
  color: black;
}
/deep/ input,
button,
select,
optgroup,
textarea {
  font-size: 16px;
}
/deep/ .ant-radio-wrapper {
  white-space: unset;
  display: flex;
  align-items: center;
  & /deep/.ant-radio-wrapper-checked {
    display: flow-root;
  }
  & /deep/.ant-radio {
    padding-top: 3px;
  }
}
.memo-cls > span{
   margin-left: 5px !important;
   color:#faad14;
}
.requiredColor {
  /deep/ &.ant-input {
    border-color: red;
  }
}
.notAllowed {
  cursor: not-allowed;
  pointer-events: none;
}
.questionStyle {
  margin: 10px 0;
  > li {
    list-style: none;
    display: flex;
    background-color: #fff;
    padding: 1.5%;
    margin-bottom: 15px;
    border: 1px solid #ededed;
  }
  .btnBox {
    text-align: center;
    display: block;
    background: unset;
    border: unset;
    & /deep/ .ant-btn {
      border: unset;
      border-radius: unset;
      margin: 0 20px;
      width: 150px;
    }
    & /deep/ .ant-btn-primary {
      background-color: #24508c;
    }
  }
  .question-num {
    padding: 0 5px;
    height: 25px;
    background-color: #48b685;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 25px;
    display: inline-block;
    margin-top: 2px;
  }
  .question-content {
    line-height: 30px;
    width: 100%;
    >div:not(.question-detail){display: flex;}
    h4 {
      font-size: 18px;
      margin-left: 10px;
      margin-bottom: 0;
      font-weight: 600;
      display: inline-block;
      i {
        font-style: normal;
        color: grey;
        display: inline-block;
        margin-left: 10px;
      }
    }
    /deep/ .ant-input-number {
      width: inherit;
      margin: 5px 0;
    }
    .question-detail {
      padding-left: 40px;
    }
    .question-atten {
      position: relative;
      margin-bottom: 8px;
      display: flex;
      // justify-content: center;
      align-items: center;
      line-height: 1;
      img {
        position: absolute;
        top: 3px;
        left: 0;
      }
      span {
        margin-left: 20px;
        // color: #b9b9b9;
        font-size: 14px;
        white-space: normal;
        line-height: 1.5;
      }
    }
  }
  .upload-demo {
    display: flex;
    align-items: center;
    line-height: 1;
    & /deep/ .el-button--primary {
      background-color: #4790bb;
      border-color: #4790bb;
      margin: 5px 10px 0 0;
    }
    & /deep/ .el-upload-list {
      display: flex;
      align-items: center;
      .el-upload-list__item {
        margin-top: 5px;
      }
    }
    & /deep/ .el-upload__tip {
      display: none;
    }
  }
  .technology {margin-bottom: 5px;
    .technology-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      .leftSide {
        text-align: left;
        display: flex;
        padding: 0;
        > li {
          list-style: none;
          margin-right: 15px;
          > img {
            margin-right: 2px;
            margin-top: -2px;
          }
        }
      }
      .rightSide {
        text-align: right;
      }
    }
    & /deep/ .ant-btn-primary {
      background-color: #548fb1;
      border-color: #548fb1;
      border-radius: unset;
      width: 100px;
      margin-left: 5px;
    }
    &/deep/ .ant-btn-primary.deleteStyle {
      background-color: #45b784;
      border-color: #45b784;
    }
  }
}
</style>